<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR导览</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .ar-view {
            position: relative;
            height: 60vh;
            background-color: #000;
            overflow: hidden;
        }
        .ar-controls {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            z-index: 10;
        }
        .ar-control-btn {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 8px;
            color: white;
            font-size: 24px;
        }
        .ar-tag {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            color: #333;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            transform: translate(-50%, -50%);
            z-index: 5;
        }
        .ar-tag::before {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(255, 255, 255, 0.9);
        }
        .ar-tag-dot {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: white;
            border: 2px solid #0052d9;
            transform: translate(-50%, -50%);
            z-index: 4;
            box-shadow: 0 0 0 4px rgba(0, 82, 217, 0.3);
            animation: pulse 2s infinite;
        }
        .ar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);
            pointer-events: none;
            z-index: 2;
        }
        .ar-guide-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-radius: 16px 16px 0 0;
            z-index: 20;
            transform: translateY(85%);
            transition: transform 0.3s ease;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
        }
        .ar-guide-panel.active {
            transform: translateY(0);
        }
        .ar-guide-handle {
            width: 40px;
            height: 5px;
            background-color: #e0e0e0;
            border-radius: 3px;
            margin: 12px auto;
        }
        .info-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .outline-btn {
            border: 1px solid #0052d9;
            color: #0052d9;
            background-color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .ar-scene-select {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 4px;
            display: inline-flex;
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }
        .ar-scene-option {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            color: #666;
        }
        .ar-scene-option.active {
            background-color: #0052d9;
            color: white;
        }
        .badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            color: white;
            background-color: #ff9800;
            margin-left: 4px;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 82, 217, 0.6);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(0, 82, 217, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(0, 82, 217, 0);
            }
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/profile.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">AR景点导览</h1>
        <a href="#" class="text-sm text-gray-500">
            <i class="icon iconfont icon-help"></i>
        </a>
    </header>

    <!-- AR视图 -->
    <div class="ar-view">
        <!-- AR场景选择 -->
        <div class="ar-scene-select">
            <div class="ar-scene-option active">实景模式</div>
            <div class="ar-scene-option">历史模式</div>
            <div class="ar-scene-option">文化模式</div>
        </div>
        
        <!-- 示例: 背景图片模拟AR场景 -->
        <img src="https://via.placeholder.com/750x900?text=黄果树瀑布AR场景" class="w-full h-full object-cover" alt="AR场景">
        
        <!-- AR交互标记 -->
        <div class="ar-tag-dot" style="top: 30%; left: 25%;"></div>
        <div class="ar-tag" style="top: 25%; left: 25%;">黄果树主瀑</div>
        
        <div class="ar-tag-dot" style="top: 45%; left: 60%;"></div>
        <div class="ar-tag" style="top: 40%; left: 60%;">水帘洞入口</div>
        
        <div class="ar-tag-dot" style="top: 70%; left: 40%;"></div>
        <div class="ar-tag" style="top: 65%; left: 40%;">观瀑平台</div>
        
        <!-- AR蒙层效果 -->
        <div class="ar-overlay"></div>
        
        <!-- AR控制按钮 -->
        <div class="ar-controls">
            <div class="ar-control-btn">
                <i class="icon iconfont icon-camera"></i>
            </div>
            <div class="ar-control-btn">
                <i class="icon iconfont icon-voice"></i>
            </div>
            <div class="ar-control-btn">
                <i class="icon iconfont icon-zoom-in"></i>
            </div>
        </div>
    </div>

    <!-- AR内容面板 (默认部分隐藏) -->
    <div class="ar-guide-panel" id="guidePanel">
        <div class="ar-guide-handle"></div>
        
        <!-- 内容标签页 -->
        <div class="flex border-b border-gray-200">
            <div class="tab-item active">景点详情</div>
            <div class="tab-item">虚拟讲解</div>
            <div class="tab-item">游览路线</div>
        </div>
        
        <div class="p-4" style="max-height: 60vh; overflow-y: auto;">
            <!-- 景点信息 -->
            <div class="info-card p-4 mb-4">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-medium">黄果树瀑布</h3>
                    <div class="flex items-center">
                        <div class="rating text-yellow-500 mr-1">★★★★★</div>
                        <div class="text-sm">5.0</div>
                    </div>
                </div>
                
                <div class="text-sm text-gray-700 mt-2">
                    黄果树瀑布位于贵州省安顺市镇宁布依族苗族自治县，是亚洲第一大瀑布，世界著名大瀑布之一。瀑布高度为77.8米，宽度为101米，其壮观景象名扬中外。水量丰沛时，瀑布如万马奔腾，气势磅礴；枯水期，则如白练悬空，飘逸秀美。
                </div>
                
                <div class="grid grid-cols-3 gap-2 mt-3">
                    <img src="https://via.placeholder.com/150x100?text=黄果树1" class="w-full h-20 object-cover rounded" alt="景点图片">
                    <img src="https://via.placeholder.com/150x100?text=黄果树2" class="w-full h-20 object-cover rounded" alt="景点图片">
                    <img src="https://via.placeholder.com/150x100?text=黄果树3" class="w-full h-20 object-cover rounded" alt="景点图片">
                </div>
                
                <div class="flex mt-3">
                    <button class="outline-btn flex-1 mr-2">分享</button>
                    <button class="primary-btn flex-1">导航前往</button>
                </div>
            </div>
            
            <!-- AR特色体验 -->
            <h3 class="text-base font-medium mb-3">AR特色体验</h3>
            
            <div class="info-card mb-3">
                <div class="flex p-3 border-b border-gray-100">
                    <div class="w-12 h-12 rounded-lg overflow-hidden mr-3 bg-blue-100 flex items-center justify-center text-blue-500">
                        <i class="icon iconfont icon-history"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium">历史穿越</div>
                        <div class="text-xs text-gray-500 mt-1">
                            通过AR技术重现明清时期黄果树瀑布的原始风貌及周边人文活动场景
                        </div>
                    </div>
                </div>
                <div class="flex p-3 border-b border-gray-100">
                    <div class="w-12 h-12 rounded-lg overflow-hidden mr-3 bg-green-100 flex items-center justify-center text-green-500">
                        <i class="icon iconfont icon-nature"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium">生态解析</div>
                        <div class="text-xs text-gray-500 mt-1">
                            展示瀑布形成过程、水文特点及周边独特生态系统
                        </div>
                    </div>
                </div>
                <div class="flex p-3">
                    <div class="w-12 h-12 rounded-lg overflow-hidden mr-3 bg-orange-100 flex items-center justify-center text-orange-500">
                        <i class="icon iconfont icon-culture"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium">民族文化</div>
                        <div class="text-xs text-gray-500 mt-1">
                            呈现布依族、苗族传统民俗活动和文化遗产
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 虚拟解说员 -->
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-medium">虚拟解说员</h3>
                <a href="#" class="text-sm text-blue-500">更换角色</a>
            </div>
            
            <div class="info-card p-3 mb-4">
                <div class="flex items-center">
                    <div class="w-16 h-16 rounded-full overflow-hidden mr-3 border-2 border-blue-500">
                        <img src="https://via.placeholder.com/64x64?text=导游" class="w-full h-full object-cover" alt="虚拟导游">
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center">
                            <div class="text-base font-medium">小贵</div>
                            <div class="badge">AI讲解员</div>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">
                            贵州本地向导，精通黄果树瀑布历史文化和自然知识
                        </div>
                        <div class="mt-2">
                            <button class="text-xs text-white bg-blue-500 px-3 py-1 rounded-full mr-2">
                                <i class="icon iconfont icon-play text-xs mr-1"></i>开始讲解
                            </button>
                            <button class="text-xs text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
                                <i class="icon iconfont icon-question text-xs mr-1"></i>提问
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 周边AR景点 -->
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-medium">周边AR景点</h3>
                <a href="#" class="text-sm text-blue-500">查看全部</a>
            </div>
            
            <div class="overflow-x-auto">
                <div class="flex space-x-3 pb-2">
                    <div class="w-32 flex-shrink-0">
                        <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden relative">
                            <img src="https://via.placeholder.com/128x96?text=天星桥" class="w-full h-full object-cover" alt="周边景点">
                            <div class="absolute top-2 right-2 text-xs bg-blue-500 text-white px-1 rounded">AR</div>
                        </div>
                        <div class="text-sm font-medium mt-1">天星桥景区</div>
                        <div class="text-xs text-gray-500">距离: 3.5km</div>
                    </div>
                    
                    <div class="w-32 flex-shrink-0">
                        <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden relative">
                            <img src="https://via.placeholder.com/128x96?text=陡坡塘" class="w-full h-full object-cover" alt="周边景点">
                            <div class="absolute top-2 right-2 text-xs bg-blue-500 text-white px-1 rounded">AR</div>
                        </div>
                        <div class="text-sm font-medium mt-1">陡坡塘瀑布</div>
                        <div class="text-xs text-gray-500">距离: 4.2km</div>
                    </div>
                    
                    <div class="w-32 flex-shrink-0">
                        <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden relative">
                            <img src="https://via.placeholder.com/128x96?text=神龙洞" class="w-full h-full object-cover" alt="周边景点">
                            <div class="absolute top-2 right-2 text-xs bg-blue-500 text-white px-1 rounded">AR</div>
                        </div>
                        <div class="text-sm font-medium mt-1">神龙洞</div>
                        <div class="text-xs text-gray-500">距离: 5.8km</div>
                    </div>
                    
                    <div class="w-32 flex-shrink-0">
                        <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden relative">
                            <img src="https://via.placeholder.com/128x96?text=大河彝族" class="w-full h-full object-cover" alt="周边景点">
                            <div class="absolute top-2 right-2 text-xs bg-blue-500 text-white px-1 rounded">AR</div>
                        </div>
                        <div class="text-sm font-medium mt-1">大河彝族村寨</div>
                        <div class="text-xs text-gray-500">距离: 8.1km</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../social/community.html" class="nav-item">
                <i class="icon iconfont icon-community"></i>
                <span>社区</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item active">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

    <!-- 简单的交互脚本 -->
    <script>
        // AR引导面板的交互
        document.addEventListener('DOMContentLoaded', function() {
            const guidePanel = document.getElementById('guidePanel');
            const guideHandle = document.querySelector('.ar-guide-handle');
            
            guideHandle.addEventListener('click', function() {
                guidePanel.classList.toggle('active');
            });
            
            // 点击AR标记点也可以打开面板
            const arDots = document.querySelectorAll('.ar-tag-dot');
            arDots.forEach(dot => {
                dot.addEventListener('click', function() {
                    guidePanel.classList.add('active');
                });
            });
        });
    </script>
</body>
</html> 